<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page isELIgnored="false"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
	crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"></script>
<%@include file="toolbar.jsp"%>

<style type="text/css">
#wra {
	width: 1000px;
	margin: 0 auto;
}
</style>
</head>
<body>
	<br>
	<br>
	<div id="wra">
		<form class="form-inline" style="margin-left: 330px;">
			<select class="form-control" id="type">
				<option>小吃</option>
				<option>主食</option>
				<option>酒水</option>
				<option>零食</option>
			</select> <input type="text" class="form-control" id="name" placeholder="输入菜名">
			<button type="submit" class="btn btn-primary" id="search">搜索</button>
		</form>
		<br>
		<button class="btn btn-success" data-toggle="modal"
			data-target="#update">增加菜品</button>
		<br />
		<br>
		<table class="table table-bordered" id="show">
			<thead>
				<tr>
					<th>预览</th>
					<th>名称</th>
					<th>类型</th>
					<th>价格</th>
					<th>操作</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tanmay</td>
					<td>Bangalore</td>
					<td>560001</td>
					<td>400003</td>
					<th><button class="btn btn-danger" data-toggle="modal"
							data-target="#update">更新</button></th>
					<th><button class="btn btn-danger" data-toggle="modal"
							data-target="#delete">删除</button></th>
				</tr>

			</tbody>
		</table>
	</div>

	<!-- 模态框 -->
	<div class="modal fade" id="update" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">Process Page</h4>
				</div>
				<div class="modal-body form-group">
					<table id="processMer">
						<form class="form-inline">

							<div class="form-group">
								<p>
									<label for="exampleInputEmail1">名称：</label> <input type="email"
										class="form-control" id="exampleInputEmail1" placeholder="菜名">
								</p>
							</div>
							<br>
							<div class="form-group">
								<p>
									<label for="exampleInputEmail1">类型：</label> <select
										class="form-control">
										<option>小吃</option>
										<option>主食</option>
										<option>酒水</option>
										<option>零食</option>
									</select>
								</p>
							</div>
							<br>
							<div class="form-group">
								<label for="exampleInputPassword1">价格：</label> <input
									type="password" class="form-control" id="exampleInputPassword1"
									placeholder="价格">
							</div>
							<br>
							<div class="form-group">
								<label for="exampleInputFile">头像：</label> <input type="file"
									id="exampleInputFile">
								<p class="help-block">请上传图片</p>
							</div>

						</form>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="button" class="btn btn-primary">Submit</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="delete" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">Detail Page</h4>
				</div>
				<div class="modal-body">
					<div class="modal-body">
						<h4>确定删除此条数据？</h4>
					</div>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary">确定</button>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		$('#search').bind('click',function(){
            var table=$('#show');
            var type=$("#type").val();
            var name=$('#name').val();
			 $.ajax({
                     type:"GET",
                     url:"search?keyword="+searchText,
                     dataType:"json"
                 }).done(function(msg){
     				for(var i=0;i<msg.length;i++)
     				{
     					var tr=$("<tr></tr>");
     					var td=$("<td></td>").text(msg[i].area);
     					td.appendTo(tr);
     					tr.appendTo(table);
     				 }
                 });
		})
	</script>
</body>
</html>